<template>
  <div class="tickettop">
      <div class="top">
          <div class="left">国内机票</div>
          <div class="right">国际·港澳台</div>
      </div>
      <div class="mid">
          <div class="one">
              <input type="text" class="before" placeholder="出发地" v-model="address">
              <span>至</span>
              <input type="text" class="after" placeholder="目的地">
          </div>
          <div class="two">
              <van-cell title="请选择旅程时间" :value="date" @click="show = true"  class="date"/>
              <van-calendar v-model="show" type="range" @confirm="onConfirm" color="#41c1ec" /> 
          </div>
          <div class="three">
              <van-button class="btn" @click="tijiao">搜索</van-button>
          </div>
      </div>
      <div class="bottom">
          <div>特价机票></div>
          <div>找低价></div>
      </div>
  </div>
</template>

<script>
export default {
    name:"ticketTop",
    data() {
        return {
        date: '',
        show: false,
        address:""
        };
    },
    methods: {
        formatDate(date) {
        return `${date.getMonth() + 1}/${date.getDate()}`;
        },
        onConfirm(date) {
        const [start, end] = date;
        this.show = false;
        this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
        },
        tijiao(){
            if(this.address){
              this.$router.push({path:'/ticketdetail',query:{address:this.address}})
            }
        }
    },
}
</script>

<style lang="scss" scoped>
.tickettop{
    width: 96%;
    // height: 65vw;
    background-color:white;
    margin: 0 auto;
    border-radius: 2vw;
    padding-top: 3vw;
    overflow: hidden;
    .top{
        .left{
            line-height: 30px;
            font-size: 20px;
            font-weight: 600;
            float: left;
            margin-left: 9vw;
            // background-color: #ddd;
            margin-bottom: 2vw;
            // color: #808080;
        }
        .right{
            line-height: 30px;
            float: right;
            font-size: 20px;
            font-weight: 600;
            margin-right: 9vw;
            // background-color: white;
            margin-bottom: 2vw;
            // color: #808080;
        }
    }
    .mid{
        // border-bottom: 1px solid #ddd;
        margin-bottom: 2vw;
        box-sizing: border-box;
        text-align: center;
        .one{

            margin-top: 5vw;
            span{
                height: 10vw;
                font-size: 14px;
            }
            .before{
                width:35vw;
                height: 10vw;
                border:0;
                margin-right: 4vw;
                font-size: 14px;
                padding-left: 15px;
                border-radius: 2vw;
                color: black !important;
                border: 1px solid #41c1ec;
                // box-sizing: border-box;
            }
            .after{
                width: 35vw;
                height: 10vw;
                border:0;
                margin-left: 4vw;
                font-size: 14px;
                padding-left: 15px;
                border-radius: 2vw;
                color: black !important;
                border: 1px solid #41c1ec;
                // box-sizing: border-box;
            }
        }
        .two{
            margin-top: 5vw;
            .date{
                margin-top: vw;
                width: 96%;
                margin-left: 2vw;
                padding-left: 15px !important;
                border-radius: 2vw;
                text-align: left;
                border: 1px solid #41c1ec;
                box-sizing: border-box;
            }
        }
        .three{
            text-align: center;
            margin-top: 5vw;
            .btn{
                box-sizing: border-box;
                background-color: #41c1ec;
                color: white;
                font-size: 15px;
                width: 96%;
                border-radius: 2vw !important;
                border: 0;
            }
        }
    }
    .bottom{
        margin-bottom: 3vw;
        margin-top: 3vw;
        div:first-child{
            display: inline-block;
            font-size: 14px;
            margin-left: 8vw;
        }
        div:last-child{
            display: inline-block;
            font-size: 14px;
            margin-left: 48vw;
        }
    }
}
</style>